<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<style>
body {
	font-size:0.8em;
	font-style:normal;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', "Segoe UI", Verdana, Geneva, Arial, Helvetica, sans-serif;
	min-width: 400px;
	overflow-x: hidden;
}
span.message { margin:0 auto; }
span.indicator { margin:0 auto; }

#cal { position:relative; padding:10px; }
#cal_close { position:absolute; top:0; right:0; }
.header_r3 a { text-decoration:none; }
div.day_header { color:#000; }
ul.event_list { padding:0 6px 0 2px; }
ul.event_list li { margin:1px 4px 1px 4px; -webkit-border-radius:3px; padding:4px; color:#fff; line-height:1.4em; }
ul.event_list li.current { border-left:red 3px solid; }
ul.event_list li.before { border-left:yellow 3px solid; }
ul.event_list li.just_before { border-left:red 3px solid; }
ul.event_list li a { text-decoration: none; }
ul.event_list li a:hover { text-decoration: underline; }
ul.event_list li a.event_title { color:#fff; }
ul.event_list li span.event_location { margin-left:.5em; }
ul.event_list li span.event_timer { display:block; text-align:right; }
ul.event_list li.past { opacity:0.8; font-size:90%; color:#ddd; }
ul.event_list li.past span { color:#ddd; }
ul.event_list li.past a.event_title { color:#ddd; }
ul.event_list li.nowmarker { -webkit-border-radius:0; background-color:#ff0000; text-align:center; border-top:2px solid #ff0000; height:0; margin:2px 0 2px 0; padding:0; overflow:hidden; opacity:1; }
</style>
<link type="text/css" rel="stylesheet" href="images/theme/gcal/theme.css"/>
</head>
<body>
<div id="cal">
<!--<img id="cal_close" src="images/close.png"/>-->
<div class="header">
	<div class="header_r1">
		<div class="header_r2">
			<div class="header_r3"><a id="header_title" href="https://www.google.com/calendar" target="_blank">Google Calendar for Today</a></div>
		</div>
	</div>
</div>
<div class="content">
	<div class="content_r1">
		<div class="content_r2">
			<div id="content" class="content_r3">
				<div id="events"></div>
				<div class="fixed"></div>
			</div>
		</div>
	</div>
</div>
<div class="footer">
	<div class="footer_r1">
		<div class="footer_r2">
			<div class="footer_r3">
				<a href="#" id="prev"></a>
				<a href="#" id="home"></a>
				<a href="#" id="next"></a>
				<!--<a href="#" id="calendar_list"></a>-->
				<a href="#" id="refresh"></a>
			</div>
		</div>
	</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
(function($){
	var background = chrome.extension.getBackgroundPage(),
		Blz = background.Blz, w = Blz.Widget, app = background.MyGoogleCal
		;
	/*$('#cal_close').attr({title:w.getResourceString('CLOSE_MENU')}).click(function(){
		window.close();
	});*/
	$('#header_title')
		.html(w.getResourceString('WINDOW_CAPTION'))
		.attr({title:w.getResourceString('GO_TO_CALENDAR')})
		.click(function(e){
		calendar = app.getCalendarUrl();
		chrome.tabs.getAllInWindow(undefined, function(tabs) {
			for (var i = 0, tab; tab = tabs[i]; i++) {
				if (tab.url && tab.url.indexOf(calendar) == 0) {
					chrome.tabs.update(tab.id, {selected: true});
					window.close();
					return;
				}
			}
			chrome.tabs.create({url:calendar});
		});
		return false;
	});
	$('#prev').attr({title:w.getResourceString('JUMP_BACKWORD')}).click(function(e){background.showDay(app._offset-1); return false;});
	$('#home').attr({title:w.getResourceString('JUMP_TODAY')}).click(function(e){background.showDay(0); return false;});
	$('#next').attr({title:w.getResourceString('JUMP_FORWARD')}).click(function(e){background.showDay(app._offset+1); return false;});
	$('#refresh').attr({title:w.getResourceString('REFRESH_MENU')}).click(function(e){background.update(true); return false;});
	
	chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
		if (request.update) update();
	});
	
	$.fn.extend({
		_msg: function(message, loading) {
			$(this).append($('<span/>').addClass((loading) ? 'indicator' : 'message').html(message));
			return this;
		}
	});
	function update() {
		var $cal = $('#events').empty();
		
		if (app.isLoginRequesting()) {
			$cal._msg(w.getResourceString('NOW_LOGIN'),true);
			return;
		}
		if (!app.isLogin()) {
			if (app.isGoogleApps()) {
				// required client login, go to option
				$cal._msg(w.getResourceString('SESSION_ERROR_ALERT', [chrome.extension.getURL("options.html")]));
			}
			else {
				// In Google account, extension will work with browser session. 
				$cal._msg(w.getResourceString('SESSION_ERROR_ALERT', [app.getCalendarUrl()]));
			}
			return;
		}
		if (app.isCalendarListRequesting()) {
			$cal._msg(w.getResourceString('LOADING_CALENDARLIST'),true);
			return;
		}
		if (app.gcal.cacheCalendars.length==0){
			$cal._msg(w.getResourceString('NOTHING_CALENDARLIST'));
			return;
		}

		var now = new Date();
		var displayDayCount = w.getPref('displayDayCount'), showPast = (w.getPref('showPast') == '1');
		for (var index = 0, showDays = (!isNaN(displayDayCount)) ? displayDayCount : 2; index < showDays; index++) {
			var offset = app._offset + index;
			var cStart = new Blz.GData.Date().addDays(offset).resetHours(), cEnd = cStart.clone().addDays(1);
			var events = [], cache = app.getAppointments(cStart); // copy the array to add repeaters
			for (calid in cache.items) {
				var cal = app.findCalendarById(calid);
				if (cal && cal.selected) {
					events = events.concat(cache.items[calid]);
				} else {
					//w.print('"'+cal.title+'" calendar is not selected.');
				}
			}
			var header = app.getHeaderDateString(cStart);
			if (offset == 0) header += ' - ' + w.getResourceString('TODAY');
			else if (offset == 1) header += ' - ' + w.getResourceString('TOMORROW');
			else if (offset == -1) header += ' - ' + w.getResourceString('YESTERDAY');
			$cal.append($('<div/>').addClass('day_header').html(header));
			
			var eventCount = 0, displayEventWithoutAllDayCount = 0, displayEventCount = 0, nextEventIndex = -1;
			if (events.length > 0) {
				events.sort(app.appointmentCompare);
				var $list = $('<ul/>').addClass('event_list');
				if (offset == 0) $list.addClass('today');
				var $nowListItem = $('<li/>').addClass('nowmarker').attr({title:now.toLocaleTimeString()}).html(now.toLocaleTimeString()), isAppendedNow = false;
				for (var i=0, len=events.length; i<len; i++) {
					var event = events[i];
					if (event.allDay) {
						// hack! filter event for time zone problem
						if (event.end<=cStart.date||event.start>=cEnd.date) continue;
					}
					eventCount++;
					
					var location = (event.location && event.location.length > 0) ? '( ' + event.location + ' )' : '';
					var time = (event.allDay) ? w.getResourceString('ALL_DAY_EVENT') : w.getResourceString('TIME_FROM_TO',[app.getTimeString(event.start),app.getTimeString(event.end)]);
					var color = event.color;
					var remain = (now < event.start) ? app.getRemainTimeString(event.start) : '';
					var tooltip = [event.title,time,remain,location].join(' ');
					
					var $li = $('<li/>').css({'background-color':color});
					$li.addClass((i%2==0) ? 'even' : 'odd');
					if (i==0) $li.addClass('first');
					if (i==len-1) $li.addClass('last');
					if (offset == 0) { // Today
						if (!event.allDay) {
							//w.print("now = " + now);
							//w.print("event.start = " + event.start);
							//w.print("event.end = " + event.end)
							if (now > event.end) { // finished event
								if (!showPast) continue;
								$li.addClass('past');
							} else if (now >= event.start && now <= event.end) { // current event
								$li.addClass('current');
								isAppendedNow = true;
							} else {
								if (event.start - now < 30 * 60 * 1000) { // before 30 minutes to event.start 
									$li.addClass('just_before');
								} else {
									$li.addClass('before');
								}
								if (-1 == nextEventIndex) { // check Just Before Event?
									nextEventIndex = i;
								}
							}
							displayEventWithoutAllDayCount++;
							if (!isAppendedNow && now < event.start) {
								$list.append($nowListItem);
								isAppendedNow = true;
							}
						}
					} else if (offset < 0) { // past
						$li.addClass('past');
					}
					
					$li.append($('<a/>').attr({href:event.link,target:'_blank'}).addClass('event_title').html(event.title));
					$li.append($('<span/>').addClass((event.allDay) ? 'event_allday' : 'event_fromto').html(time));
					if (location != '') $li.append($('<span/>').addClass('event_location').html(location));
					if (nextEventIndex==i) $li.append($('<span/>').addClass('event_timer').html(remain));
					$list.append($li.attr({title:tooltip}));
					displayEventCount++;
				}
				if (offset == 0 && !isAppendedNow && displayEventWithoutAllDayCount >0) { // Today
					$list.append($nowListItem);
				}
				$cal.append($list);
			}
			if (cache.loading) {
				$cal._msg(w.getResourceString('LOADING_EVENT'),true);
			} else if (eventCount == 0) {
				$cal._msg(w.getResourceString('NOTHING_EVENT'));
			} else if (displayEventCount == 0) {
				$cal._msg(w.getResourceString('NOTHING_DISPLAY_EVENT'));
			}
			//$('li.just_before',$list).effect("highlight",{},1000);
		}
	}
	update();
})(jQuery);
</script>
</body>
</html>